<!doctype html>
<html lang="en">
<head>
    <title>刘敦科 杨吉铖 宋清卿</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body
        {
            font-weight: bold;
            background-color: #000000;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<script src="js/three3D/Three.js"></script>
<script src="js/three3D/Detector.js"></script>
<script src="js/three3D/Stats.js"></script>
<script src="js/three3D/OrbitControls.js"></script>
<script src="js/three3D/THREEx.KeyboardState.js"></script>
<script src="js/three3D/THREEx.FullScreen.js"></script>
<script src="js/three3D/THREEx.WindowResize.js"></script>
<script src="js/three3D/SubdivisionModifier.js"></script>

<script src="js/skyDraw/init.js"></script>
<script src="js/skyDraw/planets.js"></script>
<script src="js/skyDraw/solar_sys.js"></script>
<script src="js/skyDraw/data.js"></script>

<div style="z-index: 9999; position: fixed ! important; right: 0px; top: 0px;">
    <button id="highButton">加速</button>
    <button id="lowButton">减速</button>
    <button id="start">开始转动</button>
    <button id="stop">停止转动</button>
</div>

<div style="z-index: 9999; position: fixed ! important; left: 0px; top: 0px;">
    <button id="big">big</button>
    <button id="small">small</button>
    <button id="look">look</button>
    <br/>
    <a style="color:white;" id="info">12</a>
</div>

<div style="z-index: 9999; position: fixed ! important; left: 0px; top: 300px;">
    <button id="xAdd">xAdd - 距离移动</button><br/><br/>
    <button id="xSub">xSub - 距离移动</button><br/><br/>
    <button id="yAdd">yAdd - 垂直移动</button><br/><br/>
    <button id="ySub">ySub - 垂直移动</button><br/><br/>
    <button id="zAdd">zAdd - 水平移动</button><br/><br/>
    <button id="zSub">zSub - 水平移动</button><br/><br/>
</div>

<div style="z-index: 9999; position: fixed ! important; right: 0px; top: 300px;">
    <button id="xxAdd">xAdd - X轴焦点</button><br/><br/>
    <button id="xxSub">xSub - X轴焦点</button><br/><br/>
    <button id="yyAdd">yAdd - Y轴焦点</button><br/><br/>
    <button id="yySub">ySub - Y轴焦点</button><br/><br/>
    <button id="zzAdd">zAdd - Z轴焦点</button><br/><br/>
    <button id="zzSub">zSub - Z轴焦点</button><br/><br/>
</div>

<div style="z-index: 9999; position: fixed ! important; right: 0px; bottom: 0px;">
    <button id="lockS">星体跟踪 - 开关</button>
    <button id="lockCamera">锁定相机 - 跟踪</button>
    <button id="lockE">跟踪星体 - 地球</button>
    <button id="lockJ">跟踪星体 - 木星</button>
    <button id="lockH">跟踪星体 - 海王星</button>

</div>
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

<script>
    window.lockCameraSwitch = false;
    window.loakSwitch = false;
    window.lockX = 0;
    window.lockY = 0;
    window.moveIndex = 3;


    function calcNewPoint(x,y,angle,flag)
    {
        var r = Math.sqrt(x*x+y*y);

        var newY =  500 + r * Math.sin(angle);
        var newX =  500 + r * Math.cos(angle);
        if(flag=="x")
            return newX;
        else
            return newY;
    }

    var lockCamera = document.getElementById("lockCamera");
    var lockS = document.getElementById("lockS");
    var lockE = document.getElementById("lockE");
    var lockJ = document.getElementById("lockJ");
    var lockH = document.getElementById("lockH");
    lockCamera.addEventListener("click",function () {
        if (window.lockCameraSwitch == false)
            window.lockCameraSwitch = true;
        else
            window.lockCameraSwitch = false;
        });
    lockS.addEventListener("click",function () {
        if (window.loakSwitch == false)
        {
            window.plantData = stars.Earth;
            window.plantObj = earth_obj3D;
            window.loakSwitch = true;
        }
        else
        {
            window.loakSwitch = false;
            controls.center.x = 0;
            controls.center.y = 0;
            controls.center.z = 0;
        }
    });

    lockE.addEventListener("click",function () {
        window.plantData = stars.Earth;
        window.plantObj = earth_obj3D;
        window.moveIndex = 3;
    });
    lockJ.addEventListener("click",function () {
        window.plantData = stars.Jupiter;
        window.plantObj = jupiter_obj3D;
        window.moveIndex = 1.5;
    });
    lockH.addEventListener("click",function () {
        window.plantData = stars.Neptune;
        window.plantObj = obj3Ds[6];
        window.moveIndex = 3;
    });
    var xAdd = document.getElementById("xAdd");
    var xSub = document.getElementById("xSub");
    var yAdd = document.getElementById("yAdd");
    var ySub = document.getElementById("ySub");
    var zAdd = document.getElementById("zAdd");
    var zSub = document.getElementById("zSub");
    xAdd.addEventListener("click",function () {camera.position.x += 2500;});
    xSub.addEventListener("click",function () {camera.position.x -= 2500;});
    yAdd.addEventListener("click",function () {camera.position.y += 2500;});
    ySub.addEventListener("click",function () {camera.position.y -= 2500;});
    zAdd.addEventListener("click",function () {camera.position.z += 2500;});
    zSub.addEventListener("click",function () {camera.position.z -= 2500;});

    var xxAdd = document.getElementById("xxAdd");
    var xxSub = document.getElementById("xxSub");
    var yyAdd = document.getElementById("yyAdd");
    var yySub = document.getElementById("yySub");
    var zzAdd = document.getElementById("zzAdd");
    var zzSub = document.getElementById("zzSub");
    xxAdd.addEventListener("click",function () {controls.center.x += 500;});
    xxSub.addEventListener("click",function () {controls.center.x -= 500;});
    yyAdd.addEventListener("click",function () {controls.center.y += 500;});
    yySub.addEventListener("click",function () {controls.center.y -= 500;});
    zzAdd.addEventListener("click",function () {controls.center.z += 500;});
    zzSub.addEventListener("click",function () {controls.center.z -= 500;});


    window.speed = 1;
    var highButton = document.getElementById("highButton");
    var lowButton = document.getElementById("lowButton");
    var info = document.getElementById("info");

    var look = document.getElementById("look");
    var big = document.getElementById("big");
    var small = document.getElementById("small");

    var starta = document.getElementById("start");
    var stop = document.getElementById("stop");

    starta.addEventListener("click",function () {
        controls.autoRotate = true;
        controls.autoRotateSpeed=7;
    });
    stop.addEventListener("click",function () {
        controls.autoRotate = false;
    });


    window.isClick = 0;
    document.addEventListener('mousedown', mouseclick, false);
    document.addEventListener('mouseup', mouseup, false);
    document.addEventListener('mousemove', onDocumentTouchMove, false);

    function mouseclick(event)
    {
        window.isClick=1;
    }

    function onDocumentTouchMove(event) {
        if (window.isClick==1)
        {
            info.text = camera.position.x + ",\n" +camera.position.y+ ",\n" +camera.position.z +"\n";
            info.text = info.text + ":::"+"\n" +camera.rotation.x + "\n"+camera.rotation.y+"\n"+camera.rotation.z;
        }

    }

    function mouseup(event) {
        window.isClick=0;
    }

    big.addEventListener("click",function ()
    {
        camera.position.x *=2;
        camera.position.y *=2;
        camera.position.z *=2;
    });
    small.addEventListener("click",function ()
    {
        camera.position.x /=2;
        camera.position.y /=2;
        camera.position.z /=2;
    });

    look.addEventListener("click",function () {
        camera.position.set(0,25000,0);
        controls.center.x = 0;
        controls.center.y = 0;
        controls.center.z = 0;

    });

    highButton.addEventListener("click",function ()
    {
        window.speed *= 2;
    });

    lowButton.addEventListener("click",function ()
    {
        window.speed /= 2;
    });
     start();

    function start() {
        initThree();
        initData();
        scene.add(createSolarSky(20000, 64));
        drawSolarSystem();
        animate();
    }

    function animate(){
        update();
        render();
    }

    function update(){
        if ( keyboard.pressed("z") ) {
            // do something
        }
        controls.update();
        stats.update();
    }

    function render() {
        updatePlanetsMove();
        requestAnimationFrame(animate);
        renderer.render( scene, camera );
    }

    controls.autoRotate = false;
</script>

</body>
</html>

